import { Component } from "react";
import styles from "./index.module.css";

/*
  类组件生命周期：
    初始化挂载阶段
      constructor
      static getDerivedStateFromProps
      render 返回虚拟DOM对象，组件渲染的内容
      componentDidMount 发送请求、设置定时器、绑定事件等任务
    更新阶段
      static getDerivedStateFromProps
      shouldComponentUpdate 
        性能优化：比较之前和最新的props和state的差异，如果有差异就更新，没有差异就不更新
        react更新数据要求：不能修改原数据，要产生新数据
      render
      getSnapshotBeforeUpdate
      componentDidUpdate
    卸载阶段  
      componentWillUnmount 收尾工作：解绑事件，清除定时器
*/

export default class ClassComp extends Component {
  state = {
    count: 0,
  };

  setCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <>
        <div className={styles.title}>ClassComp: {this.state.count}</div>
        <button onClick={this.setCount}>更新</button>
      </>
    );
  }
}
